<template>
  <div>
    <header class="upload-header">
      <h1>{{ $t("sysapp.uploadTitle1") }}</h1>
      <h2 class="">{{ $t("sysapp.uploadTitle2") }}</h2>
    </header>
    <div justify="center">
      <el-steps class="steps" :active="active" finish-status="success" align-center>
        <el-step :title="$t('sysapp.uploadFileStep')" />
        <el-step :title="$t('sysapp.verifyStep')" />
        <el-step :title="$t('sysapp.successStep')" />
      </el-steps>

      <div v-if="active === 0">
        <el-row type="flex" justify="center" align="middle" class="application-type" />
        <el-row type="flex" justify="center" class="row">
          <el-upload
            v-if="!loading"
            ref="upload"
            drag
            action=""
            :auto-upload="false"
            :show-file-list="false"
            accept=".apk"
            :on-change="handleFileChange"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              {{ $t("sysapp.uploadTip1") }}<em>{{ $t("sysapp.uploadTip2") }}</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                {{ $t("sysapp.uploadTip3") }}
              </div>
            </template>
          </el-upload>
        </el-row>
        <el-row type="flex" justify="center" class="row">
          <el-progress v-if="uploading" type="circle" :percentage="percentState" />
        </el-row>
        <el-row v-if="timeOut" type="flex" justify="center">
          <div style="color: red">
            {{ $t("common.connect_server_timeout") }}
          </div>
        </el-row>
        <el-row type="flex" justify="center" style="padding-top: 10px">
          <el-button type="warning" @click="back(false)">{{
            $t("common.giveUp")
          }}</el-button>
        </el-row>
      </div>
      <div v-if="active === 1" v-loading="loading" style="text-align: center">
        <div style="width: 70%; display: inline-block">
          <br />
          <div>
            <span v-if="!isLatest" style="color: red">{{ this.errorMes }}</span>
          </div>
          <br />
          <el-descriptions class="margin-top" title="" :column="2" :size="size" border>
            <el-descriptions-item
              :label="$t('sysapp.appName')"
              :label-style="{ width: '165px', 'text-align': 'center' }"
            >
              {{ app.apkName }}
            </el-descriptions-item>
            <el-descriptions-item
              :label="$t('sysapp.supportDevice')"
              :label-style="{ width: '165px', 'text-align': 'center' }"
            >
              <el-checkbox v-model="portrait" @change="portraitCheck">{{
                $t("sysapp.handHeld")
              }}</el-checkbox>
              <el-checkbox v-model="landscape" @change="landscapeCheck">{{
                $t("sysapp.hd")
              }}</el-checkbox>
              <!--              <el-radio-group v-model="confirmUploadData.modeHand">
                <el-radio :label="1">{{ $t('common.yes') }}</el-radio>
                <el-radio :label="0">{{ $t('common.no') }}</el-radio>
              </el-radio-group>-->
            </el-descriptions-item>
            <el-descriptions-item
              :label="$t('sysapp.appPackageName')"
              :label-style="{ width: '165px', 'text-align': 'center' }"
              >{{ app.packageName }}
            </el-descriptions-item>
            <el-descriptions-item
              :label="$t('sysapp.fileMd5')"
              :span="1"
              :label-style="{ width: '165px', 'text-align': 'center' }"
              >{{ app.fileMd5 }}
            </el-descriptions-item>
            <el-descriptions-item
              :label="$t('sysapp.version')"
              :label-style="{ width: '165px', 'text-align': 'center' }"
            >
              {{ app.versionName }}
            </el-descriptions-item>
            <el-descriptions-item
              :label="$t('sysapp.updateMode')"
              :label-style="{ width: '165px', 'text-align': 'center' }"
            >
              <el-radio-group v-model="confirmUploadData.forceUpdate">
                <el-radio :label="1">{{ $t("sysapp.silentUpdate") }}</el-radio>
                <el-radio :label="0">{{ $t("sysapp.normalUpdate") }}</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item
              :label="$t('sysapp.upload')"
              :label-style="{ width: '165px', 'text-align': 'center' }"
            >
              {{ uploadFormatDate(app.uploadTime) }}
            </el-descriptions-item>
            <el-descriptions-item
              :label="$t('sysapp.installMode')"
              :label-style="{ width: '165px', 'text-align': 'center' }"
            >
              <el-radio-group v-model="confirmUploadData.deleteUpdate">
                <el-radio :label="1">{{ $t("sysapp.deleteInstall") }}</el-radio>
                <el-radio :label="0">{{ $t("sysapp.patchInstall") }}</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <!--                <el-descriptions-item :label="$t('sysapp.updateToGroup')"
                                                  :contentStyle="{'width': '500px','height': '60px'}"
                                                  :labelStyle="{'width': '165px', 'text-align':'center'}">
                              <el-checkbox :label="$t('sysapp.syncAppTip')" name="type" :disabled="confirmUploadData.versionStyle == 0"></el-checkbox>
                            </el-descriptions-item>-->

            <el-descriptions-item
              :label="$t('sysapp.usage')"
              :label-style="{ width: '165px', 'text-align': 'center' }"
            >
              <el-radio-group v-model="confirmUploadData.versionStyle">
                <el-radio :label="1">{{ $t("sysapp.prodUsage") }}</el-radio>
                <el-radio :label="0">{{ $t("sysapp.testUsage") }}</el-radio>
              </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item
              :label="$t('sysapp.remark')"
              :span="2"
              :label-style="{ width: '165px', 'text-align': 'center' }"
            >
              <el-input
                v-model="confirmUploadData.remark"
                maxlength="256"
                type="textarea"
                show-word-limit
              />
            </el-descriptions-item>

            <el-descriptions-item
              v-if="confirmUploadData.versionStyle == 0"
              :label="$t('sysapp.bindSn')"
              :label-style="{ width: '80px', 'text-align': 'center' }"
              :span="2"
            >
              <el-table
                border
                :data="confirmUploadData.bindSn"
                style="width: 100%"
                :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center' }"
              >
                <el-table-column :label="$t('sysapp.devSn')" prop="sn" />
                <el-table-column align="right">
                  <template v-slot:header="scope">
                    <el-input
                      v-model="sn"
                      style="display: inline-block; width: 60%"
                      clearable
                    />
                    <el-button
                      type="warning"
                      style="display: inline-block; width: 20%; margin-left: 5px"
                      @click="handleAddSn"
                      >{{ $t("common.add") }}
                    </el-button>
                  </template>
                  <template v-slot="scope">
                    <el-button
                      type="text"
                      style="color: red"
                      @click="handleDelete(scope.$index, scope.row)"
                      >{{ $t("common.delete") }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-if="fileReady">
          <el-row type="flex" justify="center" class="row">
            <span style="margin-right: 20px">File Name: {{ fileName }}</span>
            <span>Size: {{ size }}</span>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button type="warning" @click="back(false)">{{
              $t("common.giveUp")
            }}</el-button>
            <el-button type="primary" @click="preStep">{{
              $t("sysapp.preStep")
            }}</el-button>
            <el-button
              :disabled="!isLatest"
              :loading="loading"
              type="success"
              @click="confirmUpload"
              >{{ $t("sysapp.upload") }}</el-button
            >
          </el-row>
        </div>
      </div>
      <!--      <div v-if="active == 2">
              <el-row type="flex" justify="center">
                <el-button type="warning" @click="back">{{$t('common.back')}}</el-button>
              </el-row>
            </div>-->
      <div v-if="active == 3">
        <el-row type="flex" justify="center">
          <el-button type="warning" @click="back(true)">{{
            $t("common.back")
          }}</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
// import http from '@/utils/httpRequest'
import { formatDate } from "@/utils/formatDate";
import { confirmAppVersion, releaseApk, uploadApp } from "@/api/sysapp";
import { verifyDeviceSn } from "@/api/device";

export default {
  props: {
    appTypeCode: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      source: undefined,
      radio: "android",
      formData: new FormData(),
      fileName: "",
      fileReady: false,
      timeOut: false,
      size: "",
      percentState: 0,
      uploading: false,
      active: 0,
      loading: false,
      app: {},
      sn: "",
      confirmUploadData: {
        appFileUuid: "",
        deleteUpdate: 0,
        forceUpdate: 0,
        modeHand: 1,
        modeHd: 0,
        remark: "",
        versionStyle: 1,
        syncToGroup: 0,
        bindSn: [],
      },
      portrait: true,
      landscape: false,
      isLatest: false,
      errorMes: "",
    };
  },
  methods: {
    handleFileChange(file) {
      this.formData.delete("file");
      this.$refs.upload.clearFiles();
      this.uploading = false;
      this.fileName = file.name;
      this.size = (file.size / 1024 / 1024).toFixed(2) + "MB";
      const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (extension !== "apk") {
        return this.$message.warning("Only the suffix can be uploaded is apk");
      }
      this.formData.append("file", file.raw);
      this.uploadFile(file);
      this.fileReady = true;
    },
    updateProgress(progressEvent) {
      this.percentState = Number(
        ((progressEvent.loaded / progressEvent.total) * 99).toFixed(2)
      );
    },
    uploadFile(file) {
      this.loading = true;
      this.uploading = true;
      this.percentState = 0;
      const data = new FormData();
      data.append("file", file.raw);
      const config = {
        onUploadProgress: (progressEvent) => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小
          this.percentState = Number(
            ((progressEvent.loaded / progressEvent.total) * 99).toFixed(2)
          );
        },
      };
      console.log(this.formData);
      const CancelToken = this.$axios.CancelToken;
      this.source = CancelToken.source();
      uploadApp(data, config, this.source)
        .then((res) => {
          this.app = res;
          this.confirmUploadData.appFileUuid = res.fileUuid;
          this.loading = false;
          this.uploading = false;
          this.nextStep();
          this.confirmAppVersion(res.versionCode, res.packageName);
        })
        .catch((e) => {
          this.$confirmError(e).then(() => {
            this.percentState = 100;
            this.loading = false;
            this.uploading = false;
            if (e.message) {
              const message = e.message;
              if (message.indexOf("timeout") >= 0) {
                this.timeOut = this.$t("common.connect_server_timeout");
              }
            }
          });
        });
      // http({
      //   url: http.adornUrl('file-server/file/upload'),
      //   method: 'POST',
      //   data: this.formData,
      //   resTimeout: 30 * 60 * 1000,
      //   onUploadProgress: (progressEvent) => {
      //     if (progressEvent.lengthComputable) {
      //       this.updateProgress(progressEvent)
      //     }
      //   }
      // }).then((res) => {
      //   this.app = res.data
      //   this.confirmUploadData.appFileUuid = this.app.fileUuid
      //   this.loading = false
      //   this.uploading = false
      //   this.nextStep()
      //   this.confirmAppVersion(this.app.versionCode, this.app.packageName)
      // }).catch((err) => {
      //   if (err.response != null) {
      //     if (err.response.data.code === '1092') {
      //       this.$store.dispatch('user/logout')
      //       if (import.meta.env.NODE_ENV === 'development') {
      //         this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      //       } else {
      //         window.location.href = import.meta.env.VITE_APP_HOME_PAGE
      //       }
      //     }
      //     this.loading = false
      //     this.uploading = false
      //     this.$message.error(err.response.data.message)
      //   } else {
      //     this.timeOut = err.timeout
      //   }
      // })
      this.isLatest = false;
    },
    confirmUpload() {
      if (!this.confirmUploadData.modeHand && !this.confirmUploadData.modeHd) {
        this.$message({
          type: "warning",
          message: this.$t("sysapp.pleaseSelectSupportDevice"),
        });
        return;
      }
      const arrNew = [];
      this.confirmUploadData.bindSn.forEach((item) => {
        arrNew.push(item.sn);
      });
      if (this.confirmUploadData.versionStyle === 0 && arrNew.length === 0) {
        // this.$message.warning('')
        return this.$message.warning(this.$t("sysapp.grayscaleTip"));
      }
      const param = {
        appFileUuid: this.confirmUploadData.appFileUuid,
        deleteUpdate: this.confirmUploadData.deleteUpdate,
        forceUpdate: this.confirmUploadData.forceUpdate,
        modeHand: this.confirmUploadData.modeHand,
        modeHd: this.confirmUploadData.modeHd,
        remark: this.confirmUploadData.remark,
        versionStyle: this.confirmUploadData.versionStyle,
        syncToGroup: this.confirmUploadData.syncToGroup,
        appTypeCode: this.appTypeCode,
        bindSn: arrNew,
      };
      this.loading = true;
      console.log(param);
      this.loading = true;
      releaseApk(param)
        .then((data) => {
          this.$message({
            type: "success",
            message: this.$t("common.success"),
          });
          this.loading = false;
          this.nextStep();
          this.nextStep();
          this.loading = false;
        })
        .catch((data) => {
          this.$confirmError(data);
          this.loading = false;
        });
    },
    handleAddSn() {
      this.confirmUploadData.bindSn.forEach((item) => {
        if (this.sn === item.sn) {
          this.$message({
            type: "error",
            message: this.$t("sysapp.duplicateSn"),
          });
          throw new Error(this.$t("sysapp.duplicateSn"));
        }
      });
      verifyDeviceSn(this.sn)
        .then((data) => {
          this.confirmUploadData.bindSn.push({ sn: this.sn });
          this.sn = "";
        })
        .catch((e) => {
          this.$confirmError(e);
        });
    },
    confirmAppVersion(versionCode, packageName) {
      const param = {
        versionCode: versionCode,
        packageName: packageName,
      };
      confirmAppVersion(param)
        .then((data) => {
          this.isLatest = true;
        })
        .catch((data) => {
          this.errorMes = data.message;
          this.isLatest = false;
        });
    },
    handleDelete(index, row) {
      this.confirmUploadData.bindSn.splice(index, 1);
    },
    nextStep() {
      this.active++;
    },
    preStep() {
      this.active--;
    },
    back(refresh) {
      this.$emit("backHandle", refresh);
      this.isLatest = false;
    },
    uploadFormatDate(timeStamp) {
      if (timeStamp !== null) {
        var date = new Date(timeStamp);
        return formatDate(date, "YYYY-MM-DD HH:mm:ss");
      }
    },
    portraitCheck(value) {
      if (value) {
        this.confirmUploadData.modeHand = 1;
      } else {
        this.confirmUploadData.modeHand = 0;
      }
    },
    landscapeCheck(value) {
      if (value) {
        this.confirmUploadData.modeHd = 1;
      } else {
        this.confirmUploadData.modeHd = 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
}

.upload-header {
  width: 100%;
  font-weight: 300;
  margin-bottom: 20px;
  background-attachment: fixed, fixed;
  background-image: linear-gradient(-60deg, #bad994 0, #6fcbdc 60%, #32b5cd 100%);
  background-position: center center, center center;
  background-size: cover, cover;
  color: white;
  padding: 1% 0;
  text-align: center;
  position: relative;

  & h1 {
    margin: 1% 0;
    font-size: 2.3em;
  }

  & h2 {
    margin-bottom: 1%;
    font-weight: 300;
    font-size: 1.8em;
  }

  &:after {
    content: "";
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-bottom: 16px solid white;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -20px;
  }
}

.application-type {
  margin-bottom: 40px;

  .label {
    line-height: 20px;
    font-weight: 400;
    padding: 9px 30px;
  }

  img {
    width: 40px;
  }
}

.el-upload__tip {
  text-align: center;
}
</style>
